<template>
	<view class="con">
		<swiper class="swiper" circular :current="pageTurn" @change="changeSwiper"
			:style="'height: '+ emulator_Height +'rpx;' ">
			<swiper-item>
				<navigator url="./search/index">
					<u-search shape="square" placeholder="搜索好友" :clearabled="true" :showAction="false"></u-search>
				</navigator>
				<navigator url="./newFriend/index">
					<view class="list-cell">
						<u-avatar shape="square" size="35" src="https://cdn.uviewui.com/uview/common/logo.png"
							customStyle="margin: -3px 5px -3px 0">
						</u-avatar>
						<text>
							新朋友
						</text>
					</view>
				</navigator>
				<navigator url="./mydevice/index">
					<view class="list-cell">
						<u-avatar shape="square" size="35" src="https://cdn.uviewui.com/uview/common/logo.png"
							customStyle="margin: -3px 5px -3px 0">
						</u-avatar>
						<text>
							我的设备
						</text>

					</view>
				</navigator>
				<u-index-list :index-list="indexList">
					<template v-for="(item, index) in itemArr">
						<u-index-item>
							<u-index-anchor bgColor="#fff" :text="indexList[index]"></u-index-anchor>
							<view class="list-cell" v-for="(cell, index) in item" @click="goBack">
								<u-avatar shape="square" size="35" :src="cell.img"
									customStyle="margin: -3px 5px -3px 0">
								</u-avatar>
								{{ cell.name }}
							</view>
						</u-index-item>
					</template>
				</u-index-list>
			</swiper-item>
			<swiper-item>
				<navigator url="./search/index">
					<u-search shape="square" placeholder="搜索群组" :clearabled="true" :showAction="false"></u-search>
				</navigator>
				<view class="subsection">
					<u-subsection :list="list" current="0" @change="sectionChange"></u-subsection>
				</view>
				<!-- 我创建的群 -->
				<u-index-list :index-list="indexList">
					<template v-for="(item, index) in itemArr">
						<u-index-item>
							<u-index-anchor bgColor="#fff" :text="indexList[index]"></u-index-anchor>
							<view class="list-cell" v-for="(cell, index) in item" @click="goBack">
								<u-avatar shape="square" size="35" :src="cell.img"
									customStyle="margin: -3px 5px -3px 0">
								</u-avatar>
								{{ cell.name }}
							</view>
						</u-index-item>
					</template>
				</u-index-list>
			</swiper-item>

			<swiper-item>
				<navigator url="./search/index">
					<u-search shape="square" placeholder="搜索群组" :clearabled="true" :showAction="false"></u-search>
				</navigator>
				<view class="subsection">
					<u-subsection :list="list" current="1" @change="sectionChange"></u-subsection>
				</view>
				<!-- 我管理的群 -->
				<u-index-list :index-list="indexList">
					<template v-for="(item, index) in itemArr">
						<u-index-item>
							<u-index-anchor bgColor="#fff" :text="indexList[index]"></u-index-anchor>
							<view class="list-cell" v-for="(cell, index) in item" @click="goBack">
								<u-avatar shape="square" size="35" :src="cell.img"
									customStyle="margin: -3px 5px -3px 0">
								</u-avatar>
								{{ cell.name }}
							</view>
						</u-index-item>
					</template>
				</u-index-list>
			</swiper-item>

			<swiper-item>
				<navigator url="./search/index">
					<u-search shape="square" placeholder="搜索群组" :clearabled="true" :showAction="false"></u-search>
				</navigator>
				<view class="subsection">
					<u-subsection :list="list" current="2" @change="sectionChange"></u-subsection>
				</view>
				<!-- 我加入的群 -->
				<u-index-list :index-list="indexList">
					<template v-for="(item, index) in itemArr">
						<u-index-item>
							<u-index-anchor bgColor="#fff" :text="indexList[index]"></u-index-anchor>
							<view class="list-cell" v-for="(cell, index) in item" @click="goBack">
								<u-avatar shape="square" size="35" :src="cell.img"
									customStyle="margin: -3px 5px -3px 0">
								</u-avatar>
								{{ cell.name }}
							</view>
						</u-index-item>
					</template>
				</u-index-list>
			</swiper-item>

		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTurn: 0,
				indexList: ["A", "B", "C", "D", "E"],
				itemArr: [
					[{
						name: '列表A1',
						img: 'https://cdn.uviewui.com/uview/album/1.jpg'
					}, {
						name: '列表A2',
						img: 'https://cdn.uviewui.com/uview/album/1.jpg'
					}, {
						name: '列表A3',
						img: 'https://cdn.uviewui.com/uview/album/1.jpg'
					}],
					[{
						name: '列表A1',
						img: 'https://cdn.uviewui.com/uview/album/2.jpg'
					}, {
						name: '列表A2',
						img: 'https://cdn.uviewui.com/uview/album/2.jpg'
					}, {
						name: '列表A3',
						img: 'https://cdn.uviewui.com/uview/album/2.jpg'
					}],
					[{
						name: '列表A1',
						img: 'https://cdn.uviewui.com/uview/album/3.jpg'
					}, {
						name: '列表A2',
						img: 'https://cdn.uviewui.com/uview/album/3.jpg'
					}, {
						name: '列表A3',
						img: 'https://cdn.uviewui.com/uview/album/3.jpg'
					}],
					[{
						name: '列表A1',
						img: 'https://cdn.uviewui.com/uview/album/4.jpg'
					}, {
						name: '列表A2',
						img: 'https://cdn.uviewui.com/uview/album/4.jpg'
					}, {
						name: '列表A3',
						img: 'https://cdn.uviewui.com/uview/album/4.jpg'
					}],
					[{
						name: '列表A1',
						img: 'https://cdn.uviewui.com/uview/album/5.jpg'
					}, {
						name: '列表A2',
						img: 'https://cdn.uviewui.com/uview/album/5.jpg'
					}, {
						name: '列表A3',
						img: 'https://cdn.uviewui.com/uview/album/5.jpg'
					}]
				],
				list: ['我创建的群', '我管理的群', '我加入的群'],
				emulator_Height: 0,
			};
		},
		onLoad() {
			// 获取屏幕高度
			let self = this;
			uni.getSystemInfo({
				success: function(res) {
					console.log(res.screenHeight); //屏幕高度  注意这里获得的高度宽度都是px 需要转换rpx
					console.log(res.windowWidth); //可使用窗口宽度
					console.log(res.windowHeight); //可使用窗口高度
					console.log(res.screenWidth); //屏幕宽度
					// self.emulator_Height = res.screenHeight
					self.emulator_Height = (res.screenHeight * (750 / res.windowWidth)) //将px 转换rpx
				}
			});
		},
		onShow() {
			this.toggle();
			// 国际化
			uni.setTabBarItem({
				index: 0,
				text: this.$t('tabbar.msg')
			});
			uni.setTabBarItem({
				index: 1,
				text: this.$t('tabbar.contact')
			});
			uni.setTabBarItem({
				index: 2,
				text: this.$t('tabbar.meeting')
			});
			uni.setTabBarItem({
				index: 3,
				text: this.$t('tabbar.my')
			});
		},
		methods: {
			// 修改titleNView中的buttons按钮样式
			toggle() {
				// #ifdef APP-PLUS
				var webView = this.$mp.page.$getAppWebview();
				webView.setTitleNViewButtonStyle(0, {
					fontSize: '20',
				});
				webView.setTitleNViewButtonStyle(1, {
					fontSize: '15',
				});
				// #endif
			},
			toggle2() {
				// #ifdef APP-PLUS
				var webView = this.$mp.page.$getAppWebview();
				webView.setTitleNViewButtonStyle(1, {
					fontSize: '20',
				});
				webView.setTitleNViewButtonStyle(0, {
					fontSize: '15',
				});
				// #endif
			},
			onNavigationBarButtonTap(e) {
				console.log(e)
				if (e.index == 0) {
					this.toggle();
					this.pageTurn = e.index;
					return;
				} else if (e.index == 1) {
					this.toggle2();
					this.pageTurn = e.index;
					return;
				} else if (this.pageTurn == 0 && e.index == 2) {
					uni.navigateTo({
						url: './addFriend/index',
						animationType: 'pop-in',
						animationDuration: 300
					})
					return;
				} else if (this.pageTurn == 1 && e.index == 2) {
					uni.navigateTo({
						url: './addGroup/index',
						animationType: 'pop-in',
						animationDuration: 300
					})
					return;
				};

			},
			goBack() {
				uni.navigateTo({
					url: '../chat/friends/index',
					animationType: 'pop-in',
					animationDuration: 300
				})
			},
			sectionChange(index) {
				this.pageTurn = index + 1;
			},
			changeSwiper(i) {
				console.log(i);
				this.pageTurn = i.detail.current;
				if (i.detail.current == 0) {
					this.toggle();
				} else {
					this.toggle2();
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}

	.uni-scroll-view {
		overflow: none;
		max-height: none;
	}

	.u-search {
		padding: 5px 10px;
	}

	.subsection {
		padding: 0 10px;
	}

	.u-index-anchor,
	.u-border-bottom {
		border: none;
	}
</style>